<template>
    <div class="goal-duration-container">
        <div class="chart-div" :style="{width:width}">
            <h2>Contrasting Temporal Fundraising Progress of the Current Campaign with Other {{currentCampainCategory}}
                Campaigns</h2>
            <div class="chart-container">
                <div class="chart-div">
                    <div
                            :class="className"
                            :id="id"
                            class="show-container"
                            :style="{height:height,width:width}"
                    ></div>
                    <p class="x-label">Fundraising Goal (USD)</p>
                </div>
                <div class="legend">
                    <div class="single-item">
                        <i>
                            <svg
                                    t="1577964565097"
                                    class="icon"
                                    viewBox="0 0 1024 1024"
                                    version="1.1"
                                    xmlns="http://www.w3.org/2000/svg"
                                    p-id="6680"
                                    width="32"
                                    height="32"
                            >
                                <path
                                        d="M749.226667 896a42.666667 42.666667 0 0 1-19.626667-4.693333L512 777.386667l-217.6 113.92a42.666667 42.666667 0 0 1-61.866667-45.226667l42.666667-240.213333-175.786667-170.666667a42.666667 42.666667 0 0 1-10.666666-42.666667 42.666667 42.666667 0 0 1 34.56-29.013333l243.2-35.413333 107.093333-218.88a42.666667 42.666667 0 0 1 76.8 0l108.373333 218.453333 243.2 35.413333a42.666667 42.666667 0 0 1 34.56 29.013334 42.666667 42.666667 0 0 1-10.666666 42.666666l-175.786667 170.666667 42.666667 240.213333a42.666667 42.666667 0 0 1-17.066667 42.666667 42.666667 42.666667 0 0 1-26.453333 7.68z"
                                        p-id="6681"
                                        fill="#d81e06"
                                />
                            </svg>
                        </i>
                        The Current Campaign
                    </div>
                    <div class="single-item">
                        <i>
                            <svg
                                    t="1577966616521"
                                    class="icon"
                                    viewBox="0 0 1024 1024"
                                    version="1.1"
                                    xmlns="http://www.w3.org/2000/svg"
                                    p-id="7511"
                                    width="32"
                                    height="32"
                            >
                                <path
                                        d="M512 320a192.064 192.064 0 0 1 0 384 192 192 0 0 1 0-384z"
                                        fill="#515151"
                                        p-id="7512"
                                />
                            </svg>
                        </i>
                        Other Successful {{currentCampainCategory}} Campaigns
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import echarts from "echarts";
    import {feature2Historical, feature2Current} from "@/api/feature";
    import {mapState, mapMutations} from "vuex";

    export default {
        props: {
            className: {
                type: String,
                default: "chart"
            },
            id: {
                type: String,
                default: "chart"
            },
            width: {
                type: String,
                default: "200px"
            },
            height: {
                type: String,
                default: "200px"
            }
        },
        data() {
            return {
                chart: null
            };
        },
        mounted() {
            console.log("mounted feature2")
            if(this.canDraw) {
                this.initChart();
            }
        },
        beforeDestroy() {
            if (!this.chart) {
                return;
            }
            this.chart.dispose();
            this.chart = null;
        },
        watch: {
            canDraw(val) {
                console.log("feature2: " + val)
                if (val) {
                    this.initChart();
                }
            }
        },
        computed: {
            ...mapState({
                currentCampainId: state => state.campaign.currentCampainId,
                currentCampainCategory: state => state.campaign.currentCampainCategory,
                canDraw: state => state.campaign.canDraw
            })
        },
        methods: {
            async initChart() {
                console.log("222222222")

                this.chart = echarts.init(document.getElementById(this.id));

                var historicalData = await feature2Historical();
                var currentServerData = await feature2Current();
                var currentData = currentServerData[this.currentCampainId];
                var featureType = this.currentCampainCategory;


                var duration = [];
                var goal = [];

                for (var i = 0; i < historicalData[featureType]["goal"].length; i++) {
                    duration.push(historicalData[featureType]["duration"][i]);
                    goal.push(historicalData[featureType]["goal"][i]);
                }

                var showData = [];

                $.each(goal, function (index, item) {
                    showData.push([item, duration[index]]);
                });

                let option = {
                    xAxis: [
                        {
                            type: "value",
                            splitLine: false,
                            boundaryGap: true
                        }
                    ],
                    yAxis: [
                        {
                            type: "value",
                            splitLine: false,
                            name: "Fundraising Duration (Days)"
                        }
                    ],
                    tooltip: {
                        trigger: "item",
                        showDelay: 0,
                        axisPointer: {
                            show: true,
                            lineStyle: {
                                type: "dashed",
                                width: 1
                            }
                        },
                        formatter: function (params) {
                            // var result = params[0].name;


                            if (params.data.xAxis) {
                                var showTip =
                                    "Duration:" +
                                    currentData["duration_contrast"] +
                                    "<br>Goal：" +
                                    currentData["goal_contrast"];

                                return showTip;
                            } else {
                                var x_data = params.data[0];
                                var y_data = params.data[1];

                                var tip =
                                    "Goal: " +
                                    x_data +
                                    " USD" +
                                    "<br>" +
                                    "Duration: " +
                                    y_data +
                                    " days";

                                var showTip = tip;

                                return showTip;
                            }
                        }
                    },
                    series: [
                        {
                            symbolSize: 10,
                            data: showData,
                            type: "scatter",
                            itemStyle: {
                                //当前数据的样式
                                normal: {color: "gray"}
                            },

                            markPoint: {
                                // symbol: 'pin', //标记(气泡)的图形
                                symbol: "image://../../static/img/star2.png",
                                symbolSize: 16, //标记(气泡)的大小
                                data: [
                                    {xAxis: currentData["goal"], yAxis: currentData["duration"]}
                                ]
                            },
                            markLine: {
                                lineStyle: {
                                    normal: {
                                        type: "dashed",
                                        color: "black"
                                    }
                                },
                                silent: true,
                                // label: {
                                //   normal: {
                                //     show: true,
                                //     position: "middle",
                                //     formatter: function(paras) {
                                //       var tip;
                                //       if (0 == paras.dataIndex) {
                                //         tip = currentData["duration_contrast"];
                                //       } else if (1 == paras.dataIndex) {
                                //         tip = currentData["goal_contrast"];
                                //       }
                                //       return tip;
                                //     }
                                //   }
                                // },
                                data: [
                                    [
                                        {
                                            xAxis: 0,
                                            yAxis: currentData["duration"],
                                            symbol: "circle",
                                            position: "left"
                                        },
                                        {
                                            symbol: "circle",
                                            xAxis: currentData["goal"],
                                            yAxis: currentData["duration"]
                                        }
                                    ],
                                    [
                                        {
                                            xAxis: currentData["goal"],
                                            yAxis: 0,
                                            symbol: "circle",
                                            position: "left"
                                        },
                                        {
                                            symbol: "circle",
                                            xAxis: currentData["goal"],
                                            yAxis: currentData["duration"]
                                        }
                                    ]
                                ]
                            }
                        }
                    ]
                };

                this.chart.setOption(option);
            },
            randomNum(minNum, maxNum) {
                switch (arguments.length) {
                    case 1:
                        return parseInt(Math.random() * minNum + 1, 10);
                        break;
                    case 2:
                        return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
                        break;
                    default:
                        return 0;
                        break;
                }
            }
        }
    };
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .goal-duration-container {
        .chart {
            width: 600px;
        }
        h2 {
            text-align: center;
            margin-bottom: 26px;
        }
        .chart-container {
            display: flex;
            .legend {
                margin-top: 50px;
                .single-item {
                    display: flex;
                    align-items: center;
                    i {
                        margin-right: 16px;
                    }
                    padding-top: 26px;
                }
            }
            .chart-div {
                position: relative;
                width: 100%;
                height: 100%;
                .show-container {
                    width: 86%;
                }
                .x-label {
                    position: absolute;
                    bottom: 26px;
                    font-size: 12px;
                    right: 66px;
                }
            }
        }
    }
</style>
